<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getStepList } from '@/api/assistant'
// import { getbanner1, foodshop } from '../../api/home'
const router = useRouter()
const value = ref('')
const showList = ref([])
function onClickLeft() {
    console.log(111);
    router.back()
}

getStepList().then((res) => {
    showList.value = res.data.list
    console.log(showList.value);
})



function value2() {
    getStepList().then(res => {
        // console.log(res.data.data);
        const arr = res.data.list.filter(i => {
            return i.title.includes(value.value)
        })

        showList.value = arr
    })
}




function onImg(item) {

    console.log(item.id);
    if (item.id === 1) {
        router.push('/top6')

    } else if (item.id === 2) {
        router.push('/top7')
    } else if (item.id === 3) {
        router.push('/top8')
    } else if (item.id === 4) {
        router.push('/top9')
    } else if (item.id === 5) {
        router.push('/top10')
    } else if (item.id === 6) {
        router.push('/top11')
    }

}
</script>


<template>
    <div class="box">
        <van-nav-bar title="咖出行" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">

            <van-search v-model="value" placeholder="请输入搜索关键词" @change="value2" />


            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="item in showList" :key="item.id">
                    <van-image @click="onImg(item)" :src="item.img" />
                    <p style="margin-right: 35px; margin-top: 5px;">{{ item.title }}</p>
                </van-grid-item>
            </van-grid>



        </div>
    </div>
</template>